<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <title>Showcase of The dsui:Grails DojoSUI Plugin</title>
    </head>
    <body>
		<h1>The dsui:menuBar</h1>
		<dsui:menuBarStart id="menuBar">
			<dsui:menuBarFirstLevelItem id="mbFile" title="File">
				<dsui:menuBarSecondLevelItem title="New" onClick="alert('New')"/>
				<dsui:menuBarSecondLevelItem title="Open File" onClick="alert('Open File')"/>
			</dsui:menuBarFirstLevelItem>
			<dsui:menuBarFirstLevelItem id="mbEdit" title="Edit">
				<dsui:menuBarSecondLevelItem title="Undo" onClick="alert('Undo')"/>
				<dsui:menuBarSecondLevelItem title="Redo" onClick="alert('Redo')"/>
			</dsui:menuBarFirstLevelItem>
		</dsui:menuBarStart>

		<h1>The dsui:dateTextBox</h1>
		<dsui:dateTextBox id="date1" name="date" value="05-09-1986" label="This is a date input"/>
		
		<h1>The dsui:timeTextBox</h1>
		<dsui:timeTextBox id="time1" name="time" value="T15:00:00" label="Select The time"/>
		
		<h1>The dsui:radioButton</h1>
		<dsui:radioButton id="radiobutton1" name="radiobutton" value="Elephant" label="Elephant" checked="true"/>
		<dsui:radioButton id="radiobutton2" name="radiobutton" value="Mouse" label="Mouse"/>
		
		<h1>The dsui:textBox</h1>
		<dsui:textBox id="textbox" name="textbox" value="" placeholder="Enter your name" label="Name"/>
		
		<h1>The dsui:textArea</h1>
		<dsui:textArea id="textarea" name="textarea" label="Enter your text and The dsui:textArea will be resized">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</dsui:textArea>
		
		<h1>The dsui:filteringSelect</h1>
		<dsui:filteringSelect id="filteringSelect" name="filteringSelect" label="Select an animal">
			<option value="Elephant">Elephant</option>
		    <option value="Mouse" selected>Mouse</option>
		    <option value="Snake">Snake</option>
		    <option value="Cat">Cat</option>
		    <option value="Dog">Dog</option>
		    <option value="Bird">Bird</option>
		</dsui:filteringSelect>
		
		<h1>The dsui:currencyTextBox</h1>
		<dsui:currencyTextBox id="currencyTextBox" name="currencyTextBox" value="33.33" required="true"  constraints="{fractional:true}" currency="EUR" label="Enter an amount"/>
		
		<h1>The dsui:imageLigthBox</h1>
		<dsui:imageLigthbox id="gailsLogo1" title="grailslogo" thumbnail="http://localhost:8080/dojosui-showcase/images/springsource.png" img="http://localhost:8080/dojosui-showcase/images/grails_logo.png">Grails Logo</dsui:imageLigthbox>
		
		<h1>The dsui:dataGrid</h1>
			<dsui:dataGrid id="animalStore" url="../animal/listJSON">
				<th field="id">id</th>
				<th field="name">name</th>
				<th field="age">age</th>
			</dsui:dataGrid>
	
		<h1>The dsui:toaster</h1>
		<!-- TODO-NE add an options-selection for the toaster widget -->
			<dsui:toaster id="toaster_hello" duration="0" topic="helloTopic" positionDirection="tr-left"/>
			<script>
				// the funktion is executet when you bress the button below 
			    function toasterHelloPublish() {
			        dojo.publish("helloTopic", [{
			            message: "I'm the toaster widget! I just want to say hello!!!!",
			            type: "fatal",
			            duration: 3000
			        }]);
			    }
			</script>
			<input type="button" onclick="toasterHelloPublish()" value="Click here to show the toaster message"/>
			

			
		</br>
		</br>
	</body>
</html>